<template>
	<view>
		<view>
			<u-top-tips ref="uTips"></u-top-tips>
		</view>
		<u-form :model="registerForm" ref="checkForm">
			<u-form-item label="用户名:" prop="username" label-width="150">
				<u-input v-model="registerForm.username" />
			</u-form-item>
			<u-form-item label="昵称:" prop="nickname" label-width="150">
				<u-input v-model="registerForm.nickname" />
			</u-form-item>
			<u-form-item label="密码:" prop="password" label-width="150" password-icon="true">
				<u-input type="password" v-model="registerForm.password" />
			</u-form-item>
			<u-form-item label="确认密码:" prop="repassword" label-width="150" password-icon="true">
				<u-input type="password" v-model="registerForm.repassword" />
			</u-form-item>
			<u-form-item label="上传头像" prop="faceImage" label-width="150">
				<u-upload :action="imgUploadUrl" max-count="1" width="160" height="160" @on-success="uploadImg">
				</u-upload>
			</u-form-item>
			<u-form-item label="手机号:" prop="mobile" label-width="150">
				<u-input type="number" v-model="registerForm.mobile" />
			</u-form-item>
		</u-form>
		<u-button @click="submit(registerForm)">注册</u-button>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.checkForm.setRules(this.rules);
		},
		data() {
			return {
				title: '注册',
				imgUploadUrl: this.$baseUrl + 'users/uploadImg',
				registerForm: {
					username: '',
					password: '',
					repassword: '',
					faceImage: '',
					nickname: '',
					mobile: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					nickname: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur'],
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],
					repassword: [{
							required: true,
							message: '请重新输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.registerForm.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change', 'blur'],
						}
					],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								if (value) {
									return this.$u.test.mobile(value);
								}
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		methods: {
			uploadImg(data) {
				this.registerForm.faceImage = data.data;
				console.log('data', data);
			},
			submit(data) {
				this.$refs.checkForm.validate(valid => {
					if (valid) {
						this.$u.api.register(data).then(res => {
							if (res) {
								this.$refs.uTips.show({
									title: '注册成功',
									type: 'success',
									duration: '1000'
								});
								uni.navigateTo({
									url: '/pages/index/index'
								});
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style>
</style>
